import React, { useEffect, useState } from "react";
import '../../appcommon.css';
import styles from './invitedetail.module.css';
import { useDispatch } from "react-redux";
import { DotLoading, Mask } from "antd-mobile";
import { saveEvent } from "@/store/actions/saveEvent";
import { useHistory } from "react-router-dom/cjs/react-router-dom.min";


import NavigateBar from "@/components/NavigateBar";
import { LangVnd } from '@/utils/langVnd';

/**
 * 登录页
 */
export default function InviteEarnRules() {

    //loading状态
    const [maskVisible, setMaskVisible] = useState(false)

    //显示add home弹框
    const [addHomeMaskVisible, setAddHomeMaskVisible] = useState(false);
    const [addHomeMaskIsHomeMode, setAddHomeMaskIsHomeMode] = useState(true);

    // 当前 列表
    const [curList, setCurList] = useState([]);

    // 文案翻译
    const [curLang, setCurLang] = useState(LangVnd);

    // 获取 Redux 分发器
    const dispatch = useDispatch()

    //router
    const history = useHistory()

    //清空登录信息
    useEffect(() => {
        //关闭loading
        setMaskVisible(false);

        // setCurList([
        //     '1. แพลตฟอร์มนี้มอบลิงค์เชิญ/รหัสเชิญพิเศษให้กับผู้ใช้แต่ละคน ผู้ใช้ที่ลงทะเบียนกระเป๋าสตางค์ผ่านลิงก์คำเชิญของคุณจะถือเป็นผู้ใช้ที่ได้รับเชิญจากคุณ.',
        //     '2. สำหรับรางวัลที่สร้างโดยผู้ใช้ที่คุณเชิญให้โอนสินทรัพย์ดิจิทัล คุณสามารถรับรางวัลเป็นจำนวนเงินเท่ากับ 20% ของรางวัลจากการเชิญ.',
        //     '3. รางวัลคำเชิญจะแสดงแบบลอยตัวตามรายได้ที่สร้างโดยเพื่อนที่คุณเชิญ.',
        //     '4. เฉพาะจำนวนรางวัลที่ได้รับที่สร้างโดยเพื่อนที่คุณเชิญเท่านั้นที่จะถูกนำมาใช้ในการคำนวณรางวัลคำเชิญของคุณ.',
        //     '5. รายได้ที่เกิดขึ้นในวันนั้นไม่สามารถถอนออกในวันนั้นได้ และจะต้องถอนออกในวันถัดไป จำนวนการถอนรางวัลคำเชิญแต่ละครั้งจะต้องไม่น้อยกว่า 100 usdt.',
        //     '6. แพลตฟอร์มไม่อนุญาตให้มีการเชิญเท็จ เมื่อค้นพบแล้ว รางวัลการเชิญจะไม่ถูกต้อง.',
        //     '7. สิทธิ์ในการตีความเป็นของแพลตฟอร์มนี้.'
        // ])

        setCurList([
            "1. Nền tảng cung cấp mỗi người dùng một liên kết mời / mã mời riêng. Người dùng đăng ký ví của họ qua liên kết mời của bạn được xem xét là người dùng được mời bởi bạn.",
            "2. Bạn sẽ nhận được thưởng mời tương đương với 20% số thưởng tạo ra bởi người dùng bạn đã mời khi họ nạp tài sản số.",
            "3. Thưởng mời sẽ biến động dựa trên thu nhập tạo ra bởi bạn bè bạn đã mời.",
            "4. Thưởng mời bạn nhận được sẽ được tính toán dựa trên số thưởng thực tế tạo ra bởi bạn bè bạn đã mời.",
            "5. Thu nhập tạo ra trong cùng một ngày không thể rút vào cùng một ngày và phải rút vào ngày tiếp theo. Số tiền rút tối thiểu cho thưởng mời là 100 USDT mỗi lần.",
            "6. Nền tảng không khoan dung với các hoạt động mời giả mạo, và bất kỳ hoạt động mời giả mạo nào được phát hiện sẽ dẫn đến vô hiệu hóa thưởng mời.",
            "7. Quyền giải thích thuộc về nền tảng này."
        ]);

        //打点
        doHitEvent("INVITE_EARN_RULES_START")

        return () => {
            //打点
            doHitEvent("INVITE_EARN_RULES_END")
        }
    }, [])

    //打点接口
    const doHitEvent = async (type, remark = "") => {
        console.log("doHitEvent: " + type + " , " + remark);

        try {
            //获取Action
            const action = saveEvent(type, remark)

            //触发接口
            await dispatch(action)

        } catch (e) {
            console.log(e)
        }
    }

    return (
        <div className='pageRoot pageBackgroundColorGray'>
            <NavigateBar theme="white" showLogout={false} onAddFavorite={() => { setAddHomeMaskIsHomeMode(false); setAddHomeMaskVisible(true) }} onAddHome={() => { setAddHomeMaskIsHomeMode(true); setAddHomeMaskVisible(true) }}>{curLang.inviteEarnRule}</NavigateBar>

            {/* 使用添加 home screen bar */}
            {/* <AddFavorite onAddHome={() => { setAddHomeMaskIsHomeMode(true); setAddHomeMaskVisible(true) }} /> */}

            <div className="pageContentColumnFull">
                {/* 菜单 列表 */}
                <div className="pageContentColumnFull">
                    <div className={styles.inviteDetailList}>
                        {curList && curList.map((value, index) => {
                            return (
                                <div className={styles.inviteDetailListItemRule} key={index}>
                                    <div className={styles.inviteDetailListItemTitleRule}>{value}</div>
                                </div>
                            )
                        })}
                    </div>
                </div>
            </div>

            {/* 底部 margin */}
            <div className="pageBottomEdge"></div>

            {/* load mask */}
            <Mask visible={maskVisible} opacity={0.1}
                onMaskClick={() => { }}>
                <div className="pageLoadingOverlayContent">
                    <span style={{ fontSize: 24, color: '#3498DB' }} >
                        <DotLoading color="currentColor" />
                    </span>
                </div>
            </Mask>
        </div >
    )
}